<template>
    <el-menu  active-text-color="#ffd04b" background-color="#545c64" class="aside-container el-menu-vertical-demo"
        default-active="2" text-color="#fff" :collapse="isCollapse" @open="handleOpen" @close="handleClose">
        <div style="display: flex; justify-content: center; align-items: center; gap: 8px">
            <div>
                <img style="width: 40px; height: 40px; vertical-align: middle" src="/public/rainbowLogo.png">
            </div>
            <div>
                <p class="logo-lg" style="margin: 0">{{ isCollapse ? '' : 'Rainbow' }}</p>
            </div>
        </div>
        <TreeMenu :index="1" :menuData="menuData"></TreeMenu>
    </el-menu>
</template>

<script setup>
import TreeMenu from './TreeMenu.vue';
import { useRouter } from 'vue-router'
import { reactive, computed } from 'vue';
import { useStore } from 'vuex'
const router = useRouter()
const menuData = reactive(router.options.routes[0].children)
const store = useStore()
const isCollapse = computed(() => store.state.menu.isCollapse)


const handleOpen = () => { }
const handleClose = () => { }
</script>

<style lang="less" scoped>
.aside-container {
    height: 100%;
  width: 100%;
}

.logo-lg {
    width: 100%;
    font-size: 20px;
    text-align: center;
    height: 50px;
    line-height: 50px;
    color: #fff;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 180px;
    min-height: 400px;
}

img {
  vertical-align: middle; /* 解决部分浏览器基线对齐问题 */
  object-fit: contain; /* 保持图片比例 */
}
</style>
